<template>
  <div id="index_statis">

    <span style="line-height: 20px; margin-bottom: 20px; display: block; color: #2b92cb; font-weight: 600; font-size: 20px">个人能力表</span>
    <el-progress :text-inside="true" :stroke-width="22" :percentage="computerLearnPercentage"></el-progress>
    <el-progress :text-inside="true" :stroke-width="22" :percentage="codeLearnPercentage" status="success"></el-progress>
    <el-progress :text-inside="true" :stroke-width="22" :percentage="lifeLearnPercentage" status="warning"></el-progress>
    <el-progress :text-inside="true" :stroke-width="22" :percentage="beautyLearnPercentage" status="exception"></el-progress>
    <el-progress :text-inside="true" :stroke-width="22" :percentage="moneyLearnPercentage" color="#606266"></el-progress>
  </div>

</template>

<script>
export default {
  name: "index_statis",
  data() {
    return {
      computerLearnPercentage: 50,
      codeLearnPercentage: 50,
      lifeLearnPercentage: 50,
      beautyLearnPercentage: 50,
      moneyLearnPercentage: 50
    };
  },
  mounted() {
    this.getLearnStatus();
  },
  methods: {
    getLearnStatus: function () {
      const self = this;
      this.$axios({
        method: 'get',
        url: '/skill/user/getLearnStatus'
      }).then(response => {
        var jsonString = JSON.stringify(response.data);
        var jsonObj = JSON.parse(jsonString);
        this.computerLearnPercentage = jsonObj.data.userLearnStatusVO.computerLearnPercentage;
        this.codeLearnPercentage = jsonObj.data.userLearnStatusVO.codeLearnPercentage;
        this.lifeLearnPercentage = jsonObj.data.userLearnStatusVO.lifeLearnPercentage;
        this.beautyLearnPercentage = jsonObj.data.userLearnStatusVO.beautyLearnPercentage;
        this.moneyLearnPercentage = jsonObj.data.userLearnStatusVO.moneyLearnPercentage;
      })
    }
  }
}
</script>

<style scoped lang="scss">
#index_statis {
  position: fixed;
  right: 40px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .el-progress {
    margin-bottom: 25px;
  }
}
</style>
